<template>
    <div v-if="visible" class="notice">
        <header class="notice__header">
            <Component
                :is="headerSlot.component"
                v-if="headerSlot && headerSlot.component"
                v-bind="headerSlot.props"
                v-on="headerSlot.listeners"
            />
            <h2 v-else>{{ title }}</h2>
            <i class="zx-icon-dingdanguanhuai" @click="visible=false" />
        </header>

        <div class="notice__content">
            <Component
                :is="contentSlot.component"
                v-if="contentSlot && contentSlot.component"
                v-bind="contentSlot.props"
                v-on="contentSlot.listeners"
            />
            <p v-else>{{ message }}</p>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Notice',

    props: {
        title: {
            type: String,
            default: '标题',
        },

        message: {
            type: String,
            default: '内容',
        },

        headerSlot: {
            type: Object,
            default: null,
        },

        contentSlot: {
            type: Object,
            default: null,
        },
    },

    data() {
        return {
            visible: false,
        };
    },
};
</script>

<style lang="scss" scoped>
    p,
    h2
    {
        margin-block-start: 0;
        margin-block-end: 0;
    }

    .notice
    {
        position: absolute;
        top: 200px;
        right: 800px;

        width: 300px;
        height: auto;

        border: 1px solid #ccc;
        border-radius: 5px;

        &__header
        {
            display: flex;
            justify-content: space-between;
        }
    }

</style>
